<template>
    <el-container>
        <el-main class="header_right">
            <!-- <el-icon :size="20"><Expand /></el-icon> -->
            <el-icon :size="24" class="fold" @click="closeMenu" :class="{ active: collapse }">
                <Fold />
            </el-icon>
            <el-breadcrumb>
                <el-breadcrumb-item v-for="(item, i) in breadcrumb" :key="i">{{ item }}</el-breadcrumb-item>
            </el-breadcrumb>
            <div class="nav_menu">
                <el-icon :size="iconSize" class="menu_item" v-if="!isDark" @click.stop="toggleDark()">
                    <Sunny />
                </el-icon>
                <el-icon :size="iconSize" class="menu_item" v-else @click.stop="toggleDark()">
                    <Moon />
                </el-icon>
                <el-icon :size="iconSize" class="menu_item">
                    <Message />
                </el-icon>
                <el-icon :size="iconSize" class="menu_item">
                    <Bell />
                </el-icon>
                <el-icon :size="iconSize" class="menu_item">
                    <svg-icon iconName="icon-renwu" />
                </el-icon>
                <el-icon :size="iconSize" class="menu_item">
                    <svg-icon iconName="icon-shouye" />
                </el-icon>
                <div class="user_info">
                    <div class="nick_name">
                        你好，徐子涵
                    </div>
                    <div class="now_time">
                        {{ NowTime }}
                    </div>
                </div>
                <el-dropdown @command="settingCommand">
                    <el-icon :size="iconSize" class="setting">
                        <Setting />
                    </el-icon>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item command="logOut">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
        </el-main>
    </el-container>
</template>
<script setup>
import { ref,watch } from "vue";

import {useDateFormat,useNow} from "@vueuse/core";
import { useRoute } from "vue-router";
import {useUser} from "@/composable/useUser";
import { useDark ,useToggle} from '@vueuse/core';
import {storeToRefs} from "pinia"
import {useMenuCollapseStore} from"@/store/menu";
const {logOut} =useUser();

const iconSize = ref(22);

//当前时间
const NowTime = useDateFormat(useNow(), "YYYY-MM-DD HH:mm:ss");
//设置
const settingCommand = (value) => {
    switch (value) {
        case "logOut":
            logOut();
            break;
        default:
            break;
    }
    console.log(value)

}
//菜单折叠
let {collapse}=storeToRefs(useMenuCollapseStore());

//const store = useStore()
const closeMenu = () => {
    collapse.value=!collapse.value;
    console.log(collapse.value)
}


//面包屑
const route = useRoute();
let breadcrumb = ref([])
const getBreadCom = () => {
    let mached = route.matched.filter(item => item.meta.title)
    //console.log(route.matched, mached)
    // 第一个路径如果不是首页，需要在匹配路径前面拼接一个首页
    const first = mached[0]
    console.log(first.meta.title)
    breadcrumb.value = first.meta.title;
}
getBreadCom();
// 监听路径的改变,如果发生变化了，执行方法
watch(() => route.path, () => getBreadCom())
//暗黑主题切换
const isDark = useDark();
const toggleDark = useToggle(isDark);
</script>
<style scoped>
.header_right {
    padding: 0 20px 0 0;
    display: flex;
    box-sizing: border-box;
    border-bottom: 1px solid #dcdfe6;
    align-items: center;
    overflow: hidden;
}

.fold {
    cursor: pointer;
    padding: 0 12px;
    transition: 0.5s;
    transform: rotate(0);
}

.fold.active {
    transform: rotate(180deg);
}

.nav_menu {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;

}

.setting {
    transition: .5s;
}
.setting:focus{
    outline:none;
}

.setting:hover {
    transform: rotateZ(90deg);
}

.menu_item {
    cursor: pointer;
    margin-left: 6px;
    user-select: none;
}

.user_info {
    line-height: 20px;
    font-size: 14px;
    padding: 0 10px;
}
</style>